<!--
 * @Descripttion:
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-06-02 09:21:14
 * @LastEditors: younghxp
 * @LastEditTime: 2022-05-16 17:28:18
-->
<template>
  <div class="container">
    <el-container>
      <el-header>
        <Header @updateCollapse="updateCollapse"></Header>
      </el-header>
      <el-container>
        <el-aside>
          <LeftNav
            :menuList="menuList"
            v-if="isMenuList"
            ref="leftNav"
          ></LeftNav>
        </el-aside>
        <el-main>
          <el-container>
            <Main
              :menuList="menuList"
              class="content-box"
              :class="{ 'content-collapse': collapse }"
              @updateCol="changeCol"
            ></Main>
          </el-container>
        </el-main>
      </el-container>
    </el-container>
    <FloatImportantNotice></FloatImportantNotice>
    <toDoReminder v-if="isShow"></toDoReminder>
    <adminEntry v-if="isShowProject"></adminEntry>
    <changePasswordDialog></changePasswordDialog>
    <versionUpdateDialog></versionUpdateDialog>
  </div>
</template>

<script>
import Header from '@/components/publicCom/Header'
import LeftNav from '@/components/publicCom/LeftNav'
import Main from '@/components/publicCom/Main'
import FloatImportantNotice from '@/components/publicCom/FloatImportantNotice'
import toDoReminder from '@/components/publicCom/toDoReminder'
import adminEntry from '@/components/publicCom/adminEntry'
import changePasswordDialog from '@/components/enterpriseSet/changePasswordDialog'
import versionUpdateDialog from '@/components/publicCom/versionUpdateDialog'

export default {
  name: 'container',
  components: {
    LeftNav,
    Main,
    Header,
    FloatImportantNotice,
    changePasswordDialog,
    toDoReminder,
    adminEntry,
    versionUpdateDialog,
  },
  data() {
    return {
      activeIndex: '1',
      router: true,
      parentName: '',
      childName: '',
      hasParent: true,
      hasChild: true,
      isMenuList: true,
      dialogVisible: true,
    }
  },
  watch: {
    $route: {
      handler(route) {
        const vm = this
        if (vm.isEsUser()) {
          vm.getImportantNotice()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    history.pushState(null, null, document.URL)
    window.addEventListener('popstate', function () {
      history.pushState(null, null, document.URL)
    })
    if (this.$store.state.userType == 'BANK') {
      this.isShow = true
    } else {
      this.isShow = false
    }
    if (
      this.$store.state.userType == 'PROJECT_ADMINISTRATOR' ||
      this.$store.state.userType == 'LABOR_ADMINISTRATOR'
    ) {
      this.isShowProject = true
    } else {
      this.isShowProject = false
    }
    //点击图片预览阴影可关闭弹窗
    $('body').on('click', '.el-image-viewer__mask', function () {
      $('.el-icon-circle-close').click()
    })
    // 分辨率1024隐藏菜单栏
    var that = this
    setTimeout(function () {
      if (screen.width < 1280 || screen.width == 1280) {
        that.$refs.leftNav.hideSidebar()
      }
    }, 100)
  },
  mounted() {},
  methods: {
    updateCollapse(data) {
      // 从子组件传过来的值，再传到父组件
      this.$emit('updateCol', data)
    },
    /**
     * @description:获取重要通知列表
     */
    getImportantNotice() {
      const vm = this
      vm.axios({
        method: 'get',
        url: 'api-i/info/expand/listnoread',
      })
        .then((response) => {
          vm.$store.commit('setNoticeDate', response.data.result)
        })
        .catch((error) => {
          //弹窗出来一次
          vm.$message.closeAll()
          vm.$message({
            showClose: true,
            duration: 3000,
            message: '获取重要通知列表失败',
            type: 'error',
          })
        })
    },
    changeCol(data) {
      this.collapse = data
    },
  },
  computed: {
    collapse() {
      return this.$store.getters.collapse
    },
    menuList() {
      this.isMenuList = false
      this.$nextTick(function () {
        this.isMenuList = true
      })
      return this.$store.state.menuList
    },
  },
}
</script>

<style scoped lang="less">
@baseBackGroungColor: #f3f3f3;
.container {
  width: 100%;
  height: 100%;
}
// 弹窗样式
.changePWDialog {
  background: red;
  // 页面提示
  .reminder {
    color: #666;
    font-size: 14px;
    background: #fffbe6;
    line-height: 36px;
    border-radius: 3px;
    padding: 0 24px;
    i {
      color: #ffaa00;
      margin-right: 4px;
      font-size: 20px;
      vertical-align: -2px;
    }
    .el-link {
      vertical-align: baseline;
    }
  }
}
/deep/ .el-header {
  padding: 0px;
}
/deep/ .el-aside {
  width: 230px !important;
  // height: 100%;
}
</style>
